<div id="userContainer" class="show">
    <table id="userList" lay-filter="userList" class="show"></table>
    <script type="text/html" id="usertablebar">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</div>
<script>
    layui.use(['layer', 'table'], function(){
        var table = layui.table, // 表格
                layer = layui.layer, // 弹层
                laypage = layui.laypage; // 分页

        // 动态加载数据
        table.render({
            elem: '#userList'
            ,height: 'full-214'
            ,url: apiUrl.api_get_user_list //数据接口
            ,page: true//开启分页
            ,cols: [[ //表头
                {field: 'Id', title: 'ID', width:80, align:'center', fixed: 'left', sort: true, unresize: true}
                ,{field: 'UserName', title: '用户名', width:120, unresize: true}
                ,{field: 'NickName', title: '昵称', width:120, unresize: true}
                ,{field: 'Phone', title: '电话', width: 200, unresize: true}
                ,{field: 'Address', title: '地址', width: 212, unresize: true}
//                ,{field: 'score', title: '评分', width: 80, sort: true}
//                ,{field: 'classify', title: '职业', width: 80}
//                ,{field: 'wealth', title: '财富', width: 135, sort: true}
                ,{fixed: 'right', title: '操作', width: 160, align:'center', toolbar: '#usertablebar', unresize: true}
            ]]
        });

        // 监听工具条
        table.on('tool(userList)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                    ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                layer.msg('查看操作' + data["UserName"]);
            } else if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){
                layer.msg('编辑操作');
            }
        });
    });
</script>